<template>
  <div class="homebox">
    <!-- banner图 -->
    <div class="banner">
      <div class="content common">
        <h2>
          <p id="child">
            <span style="opacity: 1; transform: translate(0px, 0%)">一</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">站</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">式</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">数</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">据</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">价</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">值</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">保</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">护</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">平</span>
            <span style="opacity: 1; transform: translate(0px, 0%)">台</span>
          </p>
          <!-- <p>
            <span v-for="(i, index) in childs" :key="index">
            </span>
          </p> -->
        </h2>
        <!-- opacity: 1; transform: translate(0px, 0%); -->
        <p>——让区块链助力新时代司法变革</p>
      </div>
    </div>
    <!-- 解决行业痛点 -->
    <div class="solve">
      <div class="content common">
        <div class="title">
          <p>解决行业痛点</p>
          <!--{cn}解决行业痛点-->
          <!--{en}Addressing industry pain points-->
        </div>
        <div class="items">
          <div class="item">
            <div class="itemlogo">
              <img src="../../../public/images/u87-0.png" alt="" />
            </div>
            <div class="desc">
              <p>特征提取与版权存证</p>
              <p>痛点：数字内容形态各异，缺乏规范化统一的版权存证机制服务</p>
            </div>
          </div>
          <div class="item">
            <div class="itemlogo">
              <img src="../../../public/images/u87-1.png" alt="" />
            </div>
            <div class="desc">
              <p>侵权检测与固证</p>
              <p>痛点：海量侵权无法及时获取，侵权网页下线无从对证</p>
            </div>
          </div>
          <div class="item">
            <div class="itemlogo">
              <img src="../../../public/images/u87-2.png" alt="" />
            </div>
            <div class="desc">
              <p>司法维权</p>
              <p>痛点：维权争议标的小、维权成本高、电子证据认定难</p>
            </div>
          </div>
          <div class="item">
            <div class="itemlogo">
              <img src="../../../public/images/u87-3.png" alt="" />
            </div>
            <div class="desc">
              <p>授权交易</p>
              <p>痛点：版权收益难以公平有效地在原创作者和相关机构间分配</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 应用场景 -->
    <div class="scene common">
      <div class="title">
        <p>应用场景</p>
      </div>
      <div class="Carousel">
        <div class="items">
          <div class="item">
            <div class="itemimg animate__animated animate__flipInY">
              <img src="../../../public/images/平台首页/p6.png" alt="" />
            </div>
            <div class="content">
              <h5>区块链+人工智能</h5>
              <p>
                基于区块链的人工智能网络可以设定一致、有效的设备注册、授权及完善的生命周期管理机制，实现契约管理，防止设备被滥用、用户受到伤害，为用户提供更好的服务。
              </p>
            </div>
          </div>
          <div class="item">
            <div class="itemimg animate__animated animate__flipInY">
              <img src="../../../public/images/平台首页/p7.png" alt="" />
            </div>
            <div class="content">
              <h5>区块链+人工智能</h5>
              <p>
                基于区块链的人工智能网络可以设定一致、有效的设备注册、授权及完善的生命周期管理机制，实现契约管理，防止设备被滥用、用户受到伤害，为用户提供更好的服务。
              </p>
            </div>
          </div>
          <div class="item">
            <div class="itemimg animate__animated animate__flipInY">
              <img src="../../../public/images/平台首页/p9.png" alt="" />
            </div>
            <div class="content">
              <h5>区块链+人工智能</h5>
              <p>
                基于区块链的人工智能网络可以设定一致、有效的设备注册、授权及完善的生命周期管理机制，实现契约管理，防止设备被滥用、用户受到伤害，为用户提供更好的服务。
              </p>
            </div>
          </div>
        </div>
        <div class="left setCarousel">
          <el-icon><ArrowLeft /></el-icon>
        </div>
        <div class="right setCarousel">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>


  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// import Translater from "../../../public/js/translate";
import "../../../public/js/translate.js";

const childs = ref([]);
let show = ref(true);
let showsmall = ref(false);
let lan = ref(true);
onMounted(() => {
  let child = document.querySelectorAll("#child");
  child.forEach((i) => {
    return Array.from(i.children).forEach((j) => {
      j.className = "animate__animated animate__zoomInLeft";
      childs.value.push(j);
    });
  });
});
</script>

<style lang="less" scoped>
.homebox {
  width: 100%;
  height: calc(100% - 65px);
  // banner图
  .banner {
    height: 400px;
    background: url("../../../public/images/平台首页/homeBanner.jpg") no-repeat
      center center;
    background-size: 100%;
    overflow: hidden;
    .content {
      h2 {
        margin: 10% 0 40px 0;
        font-size: 30px;
      }
      > p {
        margin: 0 0 0 10px;
        display: inline-block;
        white-space: pre-wrap;
      }
    }
  }
  //  解决行业痛点
  .solve {
    width: 100%;
    height: 490px;
    background-color: rgb(247, 247, 247);
    .content {
      .title {
        height: 100px;
        text-align: center;
        line-height: 100px;
        P {
          font-size: 25px;
        }
      }
      .items {
        height: 370px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .item {
          width: 580px;
          height: 150px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid #e9e9e9;
          display: flex;
          align-items: center;
          .itemlogo {
            flex: 1;
            text-align: center;
            img {
              width: 60px;
              height: 60px;
            }
          }
          .desc {
            flex: 6;
            P:first-child {
              margin: -10px 0 20px 0;
            }
          }
        }
        .item:hover {
          box-shadow: 3px 3px 25px 5px #c0c0c0;
        }
      }
    }
  }
  // 应用场景
  .scene {
    height: 445px;
    .title {
      height: 100px;
      line-height: 100px;
      text-align: center;
      p {
        font-size: 25px;
      }
    }
    .Carousel {
      height: 345px;
      padding: 0 40px;
      position: relative;
      .items {
        display: flex;
        justify-content: space-between;
        // margin: 0 auto;
        // overflow: hidden;
        .item {
          width: 360px;
          height: 245px;
          border: 1px solid #eee;
          .itemimg {
            height: 150px;
            width: 100%;
            overflow: hidden;
            // animation: run 10s linear infinite;
            img {
              display: inline-block;
              width: 100%;
              height: 100%;
              cursor: pointer;
              transition: all 0.6s;
            }
            img:hover {
              transform: scale(1.1);
            }
          }
          .content {
            padding: 0 5px;
            h5 {
              height: 40px;
              line-height: 40px;
              font-weight: normal;
              font-size: 18px;
            }
            h5:hover {
              color: #0079fe;
              cursor: pointer;
            }
            P {
              font-size: 13px;
            }
          }
        }
      }
      // 轮播图的两个按钮
      .setCarousel {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background-color: rgba(153, 153, 153, 1);
        border-radius: 50%;
        color: white;
        font-size: 20px;
      }
      .setCarousel:hover {
        background-color: rgb(51, 51, 51, 1);
        cursor: pointer;
      }
      .left {
        position: absolute;
        top: 25%;
        left: -10px;
      }
      .right {
        position: absolute;
        top: 25%;
        right: -10px;
      }
      // 轮播图的两个按钮
    }
  }
}

@keyframes run {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-640px);
  }
  25% {
    transform: translateX(-640px);
  }
  35% {
    transform: translateX(-1280px);
  }
  50% {
    transform: translateX(-1280px);
  }
  60% {
    transform: translateX(-1920px);
  }
  75% {
    transform: translateX(-1920px);
  }
  85% {
    transform: translateX(-2560px);
  }
  100% {
    transform: translateX(-2560px);
  }
}
.item:hover {
  animation-play-state: paused;
}

</style>